Open the Terminal (located under /Applications/Utilities) and type in /Applications/ Firefox.app/ Contents/ MacOS/ firefox -profilemanager. Choose Create Profile in the dialog and follow the steps.

Open a terminal, use CD to navigate to your Firefox directory and then enter ./firefox -profilemanager. Choose Create Profile in the dialog and follow the steps.

Configuration settings for firefox:

After creating the “Dev” profile, Click Start Firefox to open firefox.Then enter about:config in the address bar. It will warn you about changing settings, but it’s ok since what you will do is only minor changes for development. You can filter the existing settings, and if any of the below settings don’t exist, you can just create them.

javascript.options.showInConsole = true

nglayout.debug.disable_xul_cache = true

browser.dom.window.dump.enabled = true

Point your firefox extensions directory to your extension:

Instead of constantly preparing and reinstalling your extension, there is a simple way to add a pointer from your firefox extensions directory to your code location. To do this, you must first find your profile directory. The profile directory is where you will find all the settings for your Firefox profiles, including extension information.

Find profile directory on Windows

In Windows XP, open Explorer and go to C:\Documents and Settings\ [your user name]\ Application Data\Mozilla\Firefox\Profiles. In Windows 7, go to C:\Users\ [your user name]\ AppData\Roaming.

Find profile directory on Mac

Open the Terminal and type in CD ~/Library/Application\ Support/Firefox/profiles/. There you will find your Firefox profiles, and they will be named with letters and numbers, followed by a dot (.) and then your profile name, e.g. 56a7bc8d.dev.

Find profile directory on Linux

Open a terminal and type in CD ~/.mozilla/. There you will find all your Firefox profiles, and they will be named with letters and numbers, followed by a dot (.) and then your profile name, e.g. 89a1bc2d.dev.

Pointing to an extension

In your development profile folder, you will find a folder named extensions. In it, you will have code for all your installed extensions. This will be empty if no extensions installed on this profile. Instead of placing your code there, you can create a pointer file. Do that by creating a file with a unique name (this name have to be same as you chose for your em:id value in install.rdf file – more on that below).

In the case of our example, create an empty file named c2cplugin@koteswara.com, without any extension, and in it just point it to where you will have your code, e.g. C:\extensions\ (On Windows)

Creating folder structure and files:

Create this folder structure in extensions directory to have a good base for extension development.

 

Figure 3  Folder structure inside extensions directory

 

install.rdf:

An install manifest is the file an Add-on Manager-enabled XUL application uses to determine information about an add-on as it is being installed. It contains metadata identifying the add-on, information about who created it, which version of what applications it is compatible with, how should be updated and so on. This file must be located at the top level of an add-on's xpi file.

In the Description node,

em:id

This is where you add your own unique developer id, this has to be same as pointer file that you created above.

em:name

name of the extension

em:version

current version of the extension

em:type

type=2 declares this as an extension.

em:creator

author name

em:description

Describes the extension functionality. Will be shown in Tools → Add-ons

em:iconURL

The URL of the extension icon.

In the Description/em:targetApplication node,

em: id

This is actual id of the firefox. Change it if you want to develop thunderbird or some other.

em:minVersion

The minimum version of firefox required to run this extension.

em:maxVesrion

The maximum version of firefox required to run this extension.

The chrome of firefox is everything around the content window ie. web browser toolbar, menus, statusbar etc. This file is key to how your extension will be added to firefox and how it will work.

content c2cplugin chrome/content/

The path to where your extension content files will be found.

content c2cplugin chrome/content/ contentaccessible=yes

Same as above, but when contentaccessible=yes is added, It allows firefox 3 and later to access the extension's files and show them in web browser (like with in a webpage).

overlay chrome://browser/content/browser.xul chrome://c2cplugin/content/browser.xul

The path to which file you will use to override web browser elements, and add items to the toolbar, menu and status bar.

To attach a script use a script element.

Listing 1 Attaching script

 

<script src="highlightPhoneNumbers.js"/>

<script src="call.js"/>

<script src="chrome://c2cplugin/skin/sut.css"/>

 

Then added a button to the toolbar in firefox that shows sametime icon in the toolbar.

 

Listing 2  Adding a button to the toolbar in firefox

 

<toolbar id="nav-bar">

  <toolbarbutton id="sut-button">

    <image src = "chrome://c2cplugin/skin/sut.png"/>

 </toolbarbutton>

</toolbar>

 

highlightPhoneNumbers.js

Here we discuss about script to highlight phone numbers. Attaching highlightPhoneNumbers.js script to the overlay element will add a load event to appcontent (browser).

Listing 3 Code to load scripts when load event and DOMContentLoaded are fired

 

var appcontent = window.document.getElementById("appcontent");

appcontent.addEventListener("DOMContentLoaded", highlightNumbers, false);

document.addEventListener("load", loadHiddenElements, true)

function loadHiddenElements()

{

   loadScript();

   loadCSS();

}

 

appcontent is browser content.

when the initial DOM for the page is completely loaded ( that fires DOMContentLoaded event), highlightNumbers function will be executed.

When the page including images has first finished loading (that fires Load event), loadHiddenElements function will be executed. that means it loads call.js script and sut.css style sheet.

To highlight phone numbers, First a regular expression was made to match valid phone numbers. XPATH is embedded in javascript to navigate webpages. XPATH was used as part of the document.evaluate function. This is called with in an Xpath expression which looks for all the valid text nodes. Evaluate function returns a set of text nodes. Then each text node value was compared to the regular expressions. If a suitable node was found, It will be replaced with a new span element.

Listing 4 Code to create span element and highlight phone number

 

sutPhone = window.content.document.createElement('sutPhone');

sutPhoneNumber = window.content.document.createTextNode('\u00A0\u00A0\u00A0\u00A0\u00A0' + match[0] + '\u00A0');

sutPhone.setAttribute('onClick', 'makeCall(\'' + match[0] + '\');');

sutPhone.appendChild(sutPhoneNumber);

span.appendChild(sutPhone);

 

A new element called sutPhone will be created and sutPhoneNumber text node will be created and will be added as child to sutPhone. SutPhone will be added as child to span element. Overall, PhoneNumber will become bold and highlighted in the webpage and a phone icon will be added at front of phone number.

 

Call.js

when the user clicks on the highlighted number, makeCall function will be called and number will be passed as an argument to it.

Listing 5 makeCall function code 

 

 

function makeCall(number)

{

   image = new Image();

   if(number.search("(0)"))

   {

      var number1 = number.replace("(0)", "").replace(/\s+/g, "").replace("+", "00");

   }

   else

   {

      var number1 = number.replace(/\s+/g, "").replace("+", "00");

   }

   // To make a call using SUT REST API.

   // image.src = "https://<TAS host name>:9443/sutapi/stwebapi/call?userId=" + number1;

   // To make a call using local sametime client.

   image.src = "http://localhost:59449/stwebapi/call?number=" + number1;

   image = null;

}

To format the number, remove all the spaces between digits in numbers. If a number starts with '+' replace with “00” to make it callable.

For numbers like +353 (0) X XXXXXXX, To make it callable, (0) need to be removed.

URL to make call from the locally installed sametime client.     http://localhost:59449/stwebapi/call?number=number1

URL to To make a call using SUT REST API.           https://:9443/sutapi/stwebapi/call?userId=number1

 

Packaging and installing

Firefox extensions are delivered like XPI files. These are just like zip files. When you are finished with your extension, don not zip the containing folder, just zip the contents and change the extension to XPI.

Packaging with Windows

Select all the contents of your extension folder, right-click and choose Send To → Compressed (Zipped) Folder. Rename it to .xpi instead of .zip

Packaging with Mac

Open the Terminal, navigate to your extension with the CD command and then type in zip -r c2cplugin.xpi *

Packaging with Linux

Open the Terminal,get to your extension folder and type in zip -r c2cplugin.xpi *

 

Installing the Plugin

 

Get the plugin from here  Firefox Plugin for Click to Call

Unzip the contents to your desktop. Open c2cplugin.xpi from your firefox browser : File -> Open.  This will install the extension for your firefox browser.

To uninstall the extension go to Tools -> add-ons -> Extensions.

 

References:

1.  How to develop firefox extension http://blog.mozilla.com/addons/2009/01/28/how-to-develop-a-firefox-extension/

2. How to write your first firefox extension http://www.slideshare.net/robnyman/how-to-write-your-first-firefox-extensio

3. On Page Load from Mozilla Developer Network https://developer.mozilla.org/en/Code_snippets/On_page_load

4. Introduction to using XPATH in Javascript https://developer.mozilla.org/en/Introduction_to_using_XPath_in_JavaScript